<template>
    <div>
        <div>
            <span>分类： </span> 
            <div class="in"> 
                 <el-button-group class="ml-4">
                    <el-button :type=n.type plain v-for="n in types" @click="addTag(n)">{{n.text}}</el-button>
                </el-button-group>
            </div>
        </div>
        
        <div>
           <span>标题：</span> <div class="in"><el-input v-model="title" placeholder="请输入标题，最多60词" clearable /></div>     
        </div> 
        <div>
           <span>描述：</span> <div class="in"><el-input v-model="describe" placeholder="请简单描述帖子内容" clearable /></div>     
        </div>
        <div>
            <span>标签：</span> 
            <el-popover placement="bottom-start" :width="1000" trigger="click">
                <template #reference>
                    <div class="tag"  @mouseenter="onEnterTd" @mouseleave="onLeaveTd" >
                        <el-tag v-for="n in tags" @close="closeTag(n)" closable="true" style="margin-right: 6px;">{{ n }}</el-tag>
                        <el-button  text class="close" v-if="flag" @click="closeAll">  <el-icon><CircleClose /></el-icon></el-button>
                      
                    </div>    
                </template>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="热门" name="first" >
                            <el-button
                                v-for="n in hot"
                                :key="n.text"
                                :type="n.type"
                                text
                                @click="addTag(n)"
                                
                                >{{ n.text }}</el-button>
                        </el-tab-pane>
                        <el-tab-pane label="活动" name="secender" >                           
                                <el-button
                                v-for="n in active"
                                :key="n.text"
                                :type="n.type"
                                text
                                @click="addTag(n)"
                                >{{ n.text }}</el-button>                       
                        </el-tab-pane>
                    </el-tabs>
                </el-popover>

        </div>
        <div v-if="show">
          <span>封面：</span>  <Upload class="upload" ref="url"></Upload>
        </div>
        <div class="edit">
            
            <wangEditor ref="edit">

        </wangEditor>
        </div>
        <div class="butt">
        <el-button type="success" round @click="tijiao()">提交<el-icon size="18px"><Check /></el-icon></el-button>
        </div>
    </div>
  
</template>
    
    <script>
    import wangEditor from '../components/fuwen.vue';
    import Upload from '../components/upload.vue'
    export default {
      components:{wangEditor,Upload},
      data(){
        return {
            url:'',
            edit:'',
            title:'',
            describe:'',
            types:[{text:"文章",type:'primary',isType:0},{text:'笔记',type:'success',isType:0},{text:'专栏',type:'info',isType:0},{text:'问题',type:'warning',isType:0},{text:'面试题',type:'danger',isType:0}],
            hot:[{text:"go",type:'primary',isType:1},{text:"java",type:'success',isType:1},{text:"js",type:'info',isType:1},{text:"后端",type:'warning',isType:1}],
            active:[{text:"面试分享",type:'primary'}],
            activeName:'first',
            tags:[],
            flag:false,
            show:true
        }
      },
      methods:{
        addTag(n){
          
                var a=this.tags.findIndex(item=>item===n.text);
                console.log(a);
                if(a==0){

                }else{  
                    if(n.isType==0){
                        this.tags[0]=n.text;
                        if(n.text=="笔记"||n.text=="问题"||n.text=="面试题"){
                            this.show=false;
                        }else{
                            this.show=true;
                        }
                    }else{ this.tags.push(n.text);}
                 
                }            
            
        },
        closeTag(text){
            for(let i = 0;i<this.tags.length;i++){
               var tag=this.tags[i];
                if(tag==text){
                    this.tags.splice(i,1);
                }
            }
           
        },
        onEnterTd(){
         
            this.flag=true;
        },
        onLeaveTd(){
          
            this.flag=false;
        },
        closeAll(){
            this.tags=[];
        },
        getTags(tags){
            var tt=[];
            for(let i = 0;i<this.tags.length;i++){
               var tag=this.tags[i];            
                if(i!=0){
                   tt.push(tag);
                }
            }
            return tt;
        },
         //提交
       tijiao(){
        if(this.show){
            var img=this.$refs.url.imageUrl;
        }
        var a=this.$refs.edit.valueHtml;    
        var title=this.title;
        var describe=this.describe;
        var type=JSON.stringify(this.tags[0]);
        var tags=this.getTags(this.tags);
        var tager=JSON.stringify(tags);
        console.log(img);
        this.axios({
            url:'http://localhost:8080/article/post',
            method:'post',
            data:{
                publisher_id:'1',
                type:type,
                title:title,
                introduction:describe,  
                label:tager,
                illustration:img,
                content:a
                    
               
            }
        }).then((res)=>{
          var  code=res.data.code;         
           if(res.status==200){
                if(code==200){
                    ElMessage({
                        message: res.data.message,
                        type: 'success',
                    })
                }else{
                    ElMessage({
                        message:res.data.message,
                        type: 'warning',
                    })
                }
           }else{
            ElMessage({
                        message:'服务器开小差啦，请联系管理员',
                        type: 'warning',
                    })
           }
        })
        console.log(a)
        }
      }
    }
</script>
<style>
    .edit{
        margin-left: 202px;
        width: 1000px;
    }
    .in{
        margin-left: 150px;
        width: 1000px;
        margin-bottom: 15px;
        display: inline-block;
    }
    .tag{
        display: inline-block;
        margin-bottom: 15px;
        margin-left: 154px;
        width: 1000px;
        border:solid #E4E7ED 1px;
        border-radius: 3px;
        height: 30px;
    }
    .close{
        position: absolute;
        left: 1178px;
        
    }
    .upload{
        display: inline-block;
        margin-bottom: 15px;
        margin-left: 150px;
    }
    .butt{
    margin-top: 25px;
    margin-left: 1070px;
}
</style>
